﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    
    <script src="../../scripts/boot.js" type="text/javascript"></script>    
    <script src="jquery.tmpl.js" type="text/javascript"></script>

    <style type="text/css">
    .showCellTooltip
    {
    	color:blue;text-decoration:underline;
    }
    .ui-tooltip {
        max-width: 850px;
      }
      .ui-tooltip .mini-tooltip-inner
      {
          background:#fff9c9;    
      }
    </style>
</head>
<body>
    <div id="datagrid1" class="mini-datagrid" style="width:700px;height:250px;" 
        url="../data/AjaxService.aspx?method=SearchEmployees" ondrawcell="ondrawcell" idField="id"  pageSize="10" allowCellEdit="true" allowCellSelect="true"
    >
        <div property="columns">            
            <div type="indexcolumn"></div>
            <div field="loginname" showCellTip="false" width="120" headerAlign="center" allowSort="true">员工帐号</div>                
            <div field="gender" width="100" allowSort="true" renderer="tobutton"  align="center" headerAlign="center">性别
                <input property="editor" class="mini-combobox" style="width:100%;" data="Genders" />
            </div>
            <div field="salary" width="100" allowSort="true">薪资</div>
            <div field="birthday" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">出生日期</div>                
            <div field="educational" width="100">学历</div>
            <div name="action" width="100" headerAlign="center">#</div>
        </div>
    </div>

    <script id="formTemplate" type="text/x-jquery-tmpl">
    <table class="detailForm" >
        <tr>
            <td style="width:80px;">姓名：</td>
            <td style="width:80px;">${name}</td>
            <td style="width:80px;">生日：</td>
            <td style="width:150px;">${birtyday}</td>
            <td style="width:80px;">薪资：</td>
            <td style="width:150px;">${salary}</td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>${gender}</td>
            <td>年龄：</td>
            <td>${age}</td>
            <td>备注：</td>
            <td>${remarks}</td>
        </tr>
    </table>
    
    </script>

    <div id="aaa"></div>
</body>
</html>
<script type="text/javascript">
    var Genders = [{ id: 1, text: '男' }, { id: 2, text: '女'}];
    mini.parse();

    var grid = mini.get("datagrid1");
    grid.load();

    function ondrawcell(e) {
        var row = e.row,
                column = e.column,
                field = e.field,
                value = e.value;

        //超链接任务
        if (field == "loginname") {
            e.cellCls = 'showCellTooltip';
            e.cellHtml = '<a id="' + row.id + '">' + row.name + '</a>';
        }
    }


    //////////////////////////////////////////////////////////////////////////////////////////////////////

    $(function () {
        var tip = new mini.ToolTip();
        tip.set({
            target: document,
            selector: '.showCellTooltip',
            placement: 'right',             
            trigger: 'manual',              //关闭默认显示行为
            cls: "ui-tooltip",              //自定义样式外观
            onbeforeopen: function (e) {
                e.cancel = false;
            }
        });

        $(document).on('mouseenter', '.showCellTooltip', function (e) {

            cancelHide();

            var el = e.currentTarget;

            var id = $(el).find('a').attr("id");        //不用的单元格内容获取行id的方式也不同

            if (id) {

                $.ajax({
                    url: "../data/AjaxService.aspx?method=GetEmployee",
                    data: { id: id },
                    async: true,
                    success: function (text) {

                        var data = mini.decode(text);
                        var html = $("#formTemplate").tmpl(data)[0];

                        tip.open(el);
                        tip.setContent(html);
                    }
                });
            }

        });
        $(document).on('mouseleave', '.showCellTooltip', function (e) {
            delayHide();
        });
        ////////////////////////////////////////////////////////////////////////
        var timer = null;
        function delayHide() {
            cancelHide();
            timer = setTimeout(function () {
                timer = null;
                tip.close();
            }, 300);
        }
        function cancelHide() {
            if (timer) {
                clearTimeout(timer);
                timer = null;
            }
        }

        tip.$element.bind('mouseenter', function (e) {
            cancelHide();
        });
        tip.$element.bind('mouseleave', function (e) {
            delayHide();
        });

    });
    
</script>